<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Leaflet</title>
  <link rel="stylesheet" href="leaflet.css" />
  <script src="leaflet.js"></script>
  <script src="plugins/leaflet-ant-path.js"></script>
  <!---->
  <script src="plugins/leaflet.rotatedMarker.js"></script>
  <!--计算点位方向-->
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
    }

    #map {
      height: 100vh;
    }
  </style>
</head>

<body>
  <div id="map"></div>

  <script>
    // 计算点位方向
    function calculateBearing(lat1, lon1, lat2, lon2) {
      const dLon = (lon2 - lon1) * (Math.PI / 180);
      const y = Math.sin(dLon) * Math.cos(lat2 * (Math.PI / 180));
      const x =
        Math.cos(lat1 * (Math.PI / 180)) * Math.sin(lat2 * (Math.PI / 180)) -
        Math.sin(lat1 * (Math.PI / 180)) *
        Math.cos(lat2 * (Math.PI / 180)) *
        Math.cos(dLon);
      const bearing = Math.atan2(y, x) * (180 / Math.PI);

      // 将方位角规范化为0到360度之间
      if (bearing < 0) {
        bearing = (bearing + 360) % 360;
      }

      return bearing;
    }

    const map = L.map("map").setView([28.23, 112.93], 13);

    L.tileLayer(
      "http://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7", {
        minZoom: 11,
        maxZoom: 16,
        // attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      }
    ).addTo(map);

    const points = [
      [28.222, 112.92],
      [28.224, 112.922],
      [28.226, 112.924],
      [28.228, 112.926],
      [28.23, 112.928],
      [28.23, 112.93],
      [28.2321, 112.932],
      [28.234, 112.9342],
      [28.2361, 112.9361],
      [28.238, 112.938],
      [28.24, 112.94],
      [28.242, 112.942],
      [28.244, 112.944],
      [28.246, 112.946],
      [28.248, 112.948],
      [28.25, 112.95],
      [28.252, 112.952],
      [28.255, 112.955]
    ];

    // const myIcon = L.divIcon({
    //   html: "0.5km",
    //   className: "text-icon",
    //   fillColor: "red",
    //   iconSize: 30
    // });

    // 然后，使用这个icon创建一个标记并添加到地图上
    // L.marker([51.5, -0.09], {
    //   icon: myIcon
    // }).addTo(map);

    let moveLocationLayerGroup = L.layerGroup().addTo(map); // 定义一个图层，用于加载移动路径

    // width：半径，单位为公里
    function draw(points, width) {

      if (points.length === 0) {
        return;
      }

      map.removeLayer(moveLocationLayerGroup);
      moveLocationLayerGroup = L.layerGroup().addTo(map);

      const marker = L.marker(points[0]).addTo(moveLocationLayerGroup);

      let antPolyline = L.polyline
        .antPath(points, {
          // 点的集合
          color: "#006600",
          opacity: 6,
          fillColor: "#006600",
          pulseColor: "#e5ffe5",
          delay: 10000,
          dashArray: [10, 30],
        })
        .addTo(moveLocationLayerGroup);

      // 首先，创建一个icon的实例
      // const myIcon = L.icon({
      //   iconUrl: "images/navigate.svg", // 图标图片的URL
      //   iconSize: [24, 24], // 图标的大小
      //   iconAnchor: [15, 15], // 图标的锚点，即图标的位置应该放置在地图上的位置
      //   popupAnchor: [-3, -76] // 弹出框的锚点，即当你点击图标时，弹出框应该出现在哪个位置
      // });

      // L.marker(points[points.length - 1], { icon: myIcon }).addTo(
      //   moveLocationLayerGroup
      // );

      // L.popup()
      //   .setLatLng(points[points.length - 1])
      //   .setContent("I am a standalone popup.")
      //   .openOn(map);

      const carIcon = L.icon({
        iconUrl: "./icon/car6.svg",
        iconSize: [30, 30], // icon的大小
        iconAnchor: [16, 15], // icon的渲染的位置（相对与marker）
        shadowAnchor: [0, 0], // shadow的渲染的位置（相对于marker）
        popupAnchor: [0, 0] //若是绑定了popup的popup的打开位置（相对于icon）
      });

      const m = L.marker(points[points.length - 1], {
        icon: carIcon,
        title: "test",
        rotationAngle: calculateBearing(
          points[points.length - 2][0],
          points[points.length - 2][1],
          points[points.length - 1][0],
          points[points.length - 1][1]
        ),
        draggable: true
      });

      m.addTo(moveLocationLayerGroup);

      const circle = L.circle(points[points.length - 1], {
        stroke: true,
        dashArray: "4",
        color: "red",
        fillColor: "#f03",
        fillOpacity: 0.2,
        weight: 1,
        radius: 1200 * width,
      }).addTo(moveLocationLayerGroup);

      L.circle(points[points.length - 1], {
        color: "red",
        fillColor: "red",
        fillOpacity: 1,
        weight: 1,
        radius: 400 * width,
      }).addTo(moveLocationLayerGroup);

      function onCircleOver(e) {
        // L.popup()
        //   .setLatLng(points[points.length - 1])
        //   .setContent("半径为0.5km.")
        //   .openOn(map);

        alert("半径为0.5km.");
      }

      // circle.bindLabel(`<b>半径为${width}公里</b>`);
      circle.on("mouseover", onCircleOver);
    }

    let width = 0.25;

    setInterval(function () {
      points.push([28.23 + Math.random() / 20, 112.93 + Math.random() / 20]);

      draw(points, width);

      // width += 0.01;

    }, 2000);

    /*https://blog.csdn.net/gitblog_00009/article/details/137951724*/
    /**/
  </script>
  <!--图标方向设置：https://blog.csdn.net/yelangkingwuzuhu/article/details/137154712-->
</body>

</html>